<template>
  <view class="home">
    <BaseNavBar></BaseNavBar>
    <view
      v-if="!openId"
      :style="{
        marginTop: capsuleInfo?.top + 'px',
      }"
    ></view>
    <view class="to-login" v-if="!openId">
      <wd-button type="primary" @click="toLogin">去登录</wd-button>
    </view>
    <view class="user-info flex" v-else @click="setUserInfo">
      <img :src="url" class="avatar" />
      <view class="nickname ml-30">{{ nickname }}</view>
    </view>

    <wd-overlay :show="show">
      <view class="wrapper flex-center" style="height: 100%">
        <wd-loading color="#f0ad4e" />
      </view>
    </wd-overlay>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";

import { toast } from "../../utils/common";
import tab from "../../utils/tab";
import { getUserInfo, getOpenId, updateUserInfo } from "../../api/wechat";

const show = ref(false);

let openId = ref(null);
onShow(() => {
  if (!openId.value) {
    openId.value = uni.getStorageSync("openId");
    if (openId.value) {
      getUserInfo({
        openId: openId.value,
      }).then((res) => {
        if (res.code === 0) {
          nickname.value = res.data.nickname;
          url.value =
            res.data.avatar_url ||
            "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132";
        }
      });
    }
  } else {
    getUserInfo({
      openId: openId.value,
    }).then((res) => {
      if (res.code === 0) {
        nickname.value = res.data.nickname;
        url.value =
          res.data.avatar_url ||
          "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132";
      }
    });
  }
});

const toLogin = () => {
  wx.getUserProfile({
    desc: "获取默认空头像",
    success: (wxres) => {
      show.value = true;
      console.log(wxres);
      uni.login({
        success: (res) => {
          if (res.code) {
            getOpenId({
              code: res.code,
            }).then((res) => {
              if (res.code === 0) {
                uni.setStorageSync("openId", res.data);
                updateUserInfo({
                  openId: openId.value,
                  nickname: wxres.userInfo.nickName,
                  url: wxres.userInfo.avatarUrl,
                }).then((res) => {
                  if (res.code === 0) {
                    show.value = false;
                    tab.navigateTo("userInfo");
                  }
                });
              }
            });
          }
        },
      });
    },

    fail: (err) => {
      console.log("点击了取消");
      toast({
        title: "您拒绝了获取您头像昵称的权利,将无法进入页面,请删除重新进入!",
        duration: 3000,
        icon: "error",
      });
    },
  });
};
const { safeAreaInsets } = uni.getSystemInfoSync();
let capsuleInfo = uni.getMenuButtonBoundingClientRect();

const nickname = ref(null);
const url = ref(null);

const setUserInfo = () => {
  tab.navigateTo("userInfo");
};
</script>

<style scoped lang="scss">
.home {
  height: 100%;

  .to-login {
    text-align: center;
  }

  .user-info {
    background-color: $main-color;
    padding: 24rpx 16rpx;

    .avatar {
      width: 148rpx;
      height: 148rpx;
      border-radius: 50%;
    }

    .nickname {
      font-size: 36rpx;
      font-weight: bold;
    }
  }
}
</style>
